<template>
  <t-dialog :visible="dialogVisible" size="normal" @dialog-close="cancel">
    <div slot="title" class="app-service-center-content-habit-update-dialog__title">{{ dialogTitle }}</div>
    <div slot="content" class="app-service-center-content-habit-update-dialog__content">
      <div class="app-service-center-content-habit-update-dialog__content__lpart">
        <div class="app-service-center-content-habit-update-dialog__content__lpart__name">
          <div class="app-service-center-content-habit-update-dialog__content__lpart__name__title">习惯名称</div>
          <div class="app-service-center-content-habit-update-dialog__content__lpart__name__value">  
            <t-textarea :autosize="nameAutosize" :value="currentInputName" :focus="true" @input="handleCurrentInputName"></t-textarea>    
          </div>
        </div>
        <div class="app-service-center-content-habit-update-dialog__content__lpart__synopsis">
          <div class="app-service-center-content-habit-update-dialog__content__lpart__synopsis__title">习惯愿景</div>
          <div class="app-service-center-content-habit-update-dialog__content__lpart__synopsis__value">
            <t-textarea :autosize="synopsisAutosize" :value="currentInputSynopsis" @input="handleCurrentInputSynopsis"></t-textarea>              
          </div>
        </div>
      </div>
      <div class="app-service-center-content-habit-update-dialog__content__rpart">
        <div class="app-service-center-content-habit-update-dialog__content__rpart__info">
          <div class="app-service-center-content-habit-update-dialog__content__rpart__info__title">其他</div>
          <div class="app-service-center-content-habit-update-dialog__content__rpart__info__table">
            <t-table :items="currentItemOtherAttrubutes" size="mini" type="blue" border stripe>
              <t-table-column label="相关属性" prop="id" width="3"></t-table-column>
              <t-table-column label="属性值" prop="content" width="5"></t-table-column>
            </t-table>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: right;">
      <t-button size="normal" type="update" @click="updateItem">更新</t-button>
      <t-button size="normal" type="delete" @click="deleteItem">删除</t-button>
      <t-button size="normal" type="primary" @click="cancel">退出</t-button>
    </div>
  </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-service-center-content-topic-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
    },
    components: {
      TDialog,
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
    },
    data() {
      return {
        nameAutosize: {
          minRows: 2,
          maxRows: 4,
        },
        synopsisAutosize: {
          minRows: 4,
          maxRows: 4,
        },
      };
    },
    computed: {
      topics() {
        return this.store.topics;
      },
      currentItem() {
        return this.store.current.item;
      },
      currentItemOtherAttrubutes() {
        if (this.store.current.item === null) return [];
        const attrs = [];
        attrs.push({ createDate: '创建时间', createDateVal: this.store.current.item.createDate });
        attrs.push({ createDate: '更新时间', createDateVal: this.store.current.item.updateDate });
        attrs.push({ createDate: '今日番茄', createDateVal: this.store.current.item.todayTomatoAmount });
        attrs.push({ createDate: '累计番茄', createDateVal: this.store.current.item.tomatoAmount });
        return attrs;
      },
      currentInputName() {
        return this.store.current.input.name;
      },
      currentInputSynopsis() {
        return this.store.current.input.synopsis;
      },
      dialogTitle() {
        return this.store.updateDialog.title;
      },
      dialogVisible() {
        return this.store.updateDialog.visible;
      },
    },
    methods: {
      handleCurrentInputName(val) {
        this.store.current.input.name = val;
      },
      handleCurrentInputSynopsis(val) {
        this.store.current.input.synopsis = val;
      },
      cancel() {
        this.$emit('close');
      },
      deleteItem() {
        const id = this.store.current.item.id;
        this.store.habits = this.store.habits.filter((item) => {
          return item.id !== id;
        });
        this.$emit('close');
        const target = `api/habits/${id}/actions/delete`;
        this.$http.request({
          url: target,
          method: 'post',
        }).then(() => {
        }).catch(() => {
        });
      },
      updateItem() {
        const id = this.store.current.item.id;
        const name = this.store.current.input.name;
        const synopsis = this.store.current.input.synopsis;
        Object.values(this.store.habits).forEach((item) => {
          if (item.id === id) {
            item.name = name;
            item.synopsis = synopsis;
          }
        });
        this.$emit('close');
        const target = `api/habits/${id}`;
        this.$http.request({
          url: target,
          method: 'put',
          data: {
            name,
            synopsis,
          },
          transformRequest: [(data) => {
            const encodeName = encodeURIComponent(data.name);
            const encodeSynopsis = encodeURIComponent(data.synopsis);
            return `name=${encodeName}&synopsis=${encodeSynopsis}`;
          }],
        }).then(() => {
        }).catch(() => {
        });
      },
      dateFormat(ut) {
        const day = ut.dayOfMonth;
        const dayValue = day < 10 ? `0${day}` : `${day}`;
        return `${ut.year}-${ut.monthValue}-${dayValue}`;
      },
    },
  };
</script>